<template>
  <div class="homepage">
	 <headerinfo></headerinfo>
	  
    <div class="page page1">
		<view class="header">
		 	<image src="/static/images/logo.png" mode="widthFix"></image>
				<view class="btns">
					<span>关于</span>
					<span class="login">登录</span>
					<span class="zhuce">注册</span>
				</view>
		 </view>
		<view class="textbox">
			<view class="title" >
				寻找下一个
			</view>
			<view class="title" style="color: #ec1818;">
				家居装潢点子
			</view>
		</view>
	</div>
    <div class="page page2">
		<view class="images">
			<image src="/static/images/page2.jpg" mode="widthFix"></image>
		</view>
		<view class="test">
			<view class="title">
				搜索创意点子
			</view>
			<view class="desc">
				你接下来想要尝试搜索什么?想想你心之所向的事物，例如,“简单鸡肉晚餐”，然后查看搜索结果。
			</view>
			
			<view class="btn">
				探索
			</view>
		</view>
	</div>
    <div class="page">123</div>
  </div>
</template>

<script>
  export default {
    name: 'Demo',
    data () {
      return {
        index: 0, // 索引
        delay: 500, // 滚动事件间隔时间
        lock: false // 锁
      }
    },
    mounted () {
      this.$el.addEventListener('mousewheel', this.mousewheelHandler)
    },
    watch: {
      index (newVal, oldVal) {
        if (newVal !== oldVal) { // 防止往相同的位置滚动后就要无辜等待delay秒才能再次滚动
          this.lock = true
        }
      }
    },
    methods: {
      mousewheelHandler (event) {
        let value = event.wheelDelta > 0 ? 'up' : 'down'
        this.scrollHandler(value)
      },
      scrollHandler (value) {
        if (this.lock) {
          return
        }
        let mapIndex = {
          up: Math.max(0, this.index - 1),
          down: Math.min(this.$el.children.length - 1, this.index + 1)
        }
        this.index = mapIndex[value]
        this.$el.children[this.index].scrollIntoView({ behavior: 'smooth' })
        setTimeout(() => this.lock = false, this.delay)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .homepage {
    overflow: hidden;
  }
  .page{
	  height: 100vh;
	  background-color: #fff;
  }
  
  .header{
	  height: 60px;
	  width: 100%;
	  background-color: #fff;
	  position: fixed;
	  top: 0;
	  z-index: 1000;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 0 30px;
	  image{
		  width: 80px;
		  height: auto;
	  }
	  
	  .btns{
		  display: flex;
		  align-items: center;
		  span{
			  margin-left: 20px;
			  font-size: 13px;
			  padding: 5px 15px;
			  cursor: pointer;
			  font-weight: bold;
		  }
		  .login{
			  background-color: #ec1818;
			  color: #fff;
			  border-radius: 50px;
		  }
		  .zhuce{
			  margin-left: 10px;
			  background-color: #e2e1e1;
			  color: #333;
			  border-radius: 50px;
		  }
	  }
	  
  }
  
  .page1{
	  padding-top: 200px;
	  background-image: url('/static/images/page1.jpg');
	  background-size: 100% 100%;
	  .textbox{
		  .title{
			  font-size: 37px;
			  text-align: center;
			  margin-top: 20px;
			  letter-spacing: 2px;
		  }
	  }
  }
  
  .page2{
	  background-color: #fcf694;
	  display: flex;
	  align-items: center;
	  .images{
		  width: 50%;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  image{
			  width: 400px;
			  border-radius: 10px;
		  }
	  }
	  
	  .test{
		  width: 50%;
		  text-align: center;
		  padding: 0 15%	;
		  color: #e34545;
		  .title{
			  font-size: 36px;
			  margin-bottom: 20px;
			  font-weight: bold;
		  }
		  .desc{
			  font-size: 16px;
			  line-height: 30px;
		  }
		  
		  .btn{
			  background-color: #e34545;
			  padding: 10px 20px;
			  border-radius: 50px;
			  color: #fff;
			  width: 100px;
			  margin: 0 auto;
			  margin-top: 30px;
			  cursor: pointer;
		  }
	  }
  }

</style>